<template>
    <div >
        <Header>
            <div class="home_content">
                <div class="crumbs_box">
                    <el-button size="small" icon="el-icon-arrow-left" @click.native="toRoute(-1)">返回</el-button>
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;margin:0 0 -3px 10px;">
                        <el-breadcrumb-item>考勤管理</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/classes_list'}">班次管理</el-breadcrumb-item>
                        <el-breadcrumb-item>新增班次</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="newly_single_box">
                    <el-form :model="formData" status-icon :rules="rules1" ref="form" label-width="83px" class="firstStepForm" >
                        <el-form-item label="类型名称:" prop="name">
                            <el-input v-model="formData.name" placeholder="请填写类型名称"></el-input>
                        </el-form-item>
                        <el-form-item label="考勤类型:">
                            <div class="radioBox" :class="{checked:formData.type==1}" @click="formData.type=1">
                                <p class="radio_headline">早晚打卡</p>
                                <p class="radio_subhead">如朝九晚六，中间午休时间无需打卡上下班</p>
                            </div>
                            <div class="radioBox" :class="{checked:formData.type==2}" @click="formData.type=2">
                                <p class="radio_headline">分段打卡</p>
                                <p class="radio_subhead">适用于每次上下班均需要打卡企业</p>
                            </div>
                        </el-form-item>
                        <div class="form_headline">上下班时间设置</div>
                        <div class="form_subhead">用于设置员工上下班打卡时间、打卡时间段、休息时间段等</div>
                        <div class="mb25" v-if="formData.type==2"><el-button icon="el-icon-plus" type="primary" plain :disabled='formData.set.length==3' size="small" @click.native='onAddTime'>添加上下班时间</el-button></div>
                        <table class="form_table">
                            <tr>
                                <th style="min-width:260px;">上班时间段</th><th style="min-width: 470px;" colspan="2">有效打卡时间段
                                <el-switch
                                        :active-value="1"
                                        :inactive-value="0"
                                        v-model="formData.section"
                                        active-color="#44D0DB">
                                </el-switch>
                            </th>
                            </tr>
                            <template v-for='(set,index) in formData.set'>
                                <tr>
                                    <td>
                                        上班{{index+1}}时间
                                        <el-time-picker
                                                size="small"
                                                style="width: 96px;"
                                                v-model="set.start"
                                                format="HH:mm"
                                                value-format='HH:mm'
                                                :picker-options="{format:'HH:mm'}">
                                        </el-time-picker>
                                    </td><td style="text-align: left;">
                                    上班{{index+1}}打卡时间段
                                    <el-time-picker
                                            size="small"
                                            style="width: 96px;"
                                            v-model="set.sign_startime"
                                            format="HH:mm"
                                            value-format='HH:mm'
                                            :picker-options="{format:'HH:mm'}">
                                    </el-time-picker><el-tag type="warning" effect="dark" v-if="formData.type==2">昨日</el-tag><span class="padding5">至</span><el-time-picker
                                        size="small"
                                        style="width: 96px;"
                                        format="HH:mm"
                                        v-model="set.sign_endtime"
                                        value-format='HH:mm'
                                        :picker-options="{format:'HH:mm'}">
                                </el-time-picker>
                                </td>
                                    <td rowspan="2" class="td_clear"><i class="el-icon-remove" v-if="index==2" @click="onRemoveTime(index)"></i></td>
                                </tr>
                                <tr class="tr_bottom">
                                    <td>
                                        下班{{index+1}}时间
                                        <el-time-picker
                                                size="small"
                                                style="width: 96px;"
                                                v-model="set.end"
                                                value-format='HH:mm'
                                                format="HH:mm"
                                                :picker-options="{format:'HH:mm'}">
                                        </el-time-picker><el-tag type="warning" effect="dark">次日</el-tag>
                                    </td><td style="text-align: left;">
                                    下班{{index+1}}打卡时间段
                                    <el-time-picker
                                            size="small"
                                            style="width: 96px;"
                                            value-format='HH:mm'
                                            format="HH:mm"
                                            v-model="set.outsign_startime"
                                            :picker-options="{format:'HH:mm'}">
                                    </el-time-picker><span class="padding5">至</span><el-time-picker
                                        size="small"
                                        style="width: 96px;"
                                        value-format='HH:mm'
                                        format="HH:mm"
                                        v-model="set.outsign_endtime"
                                        :picker-options="{format:'HH:mm'}">
                                </el-time-picker>
                                </td>
                                </tr>

                            </template>
                        </table>
                        <template v-if="formData.type==1">
                            <div class="set_row"><el-checkbox v-model="formData.rest" :true-label='1' :false-label='0'></el-checkbox>休息时间<el-time-picker
                                    size="small"
                                    style="width: 96px;margin-left:8px;"
                                    v-model="formData.rest_start_time"
                                    value-format='HH:mm'
                                    format="HH:mm"
                                    :picker-options="{format:'HH:mm'}">
                            </el-time-picker><span class="padding5">至</span><el-time-picker
                                    size="small"
                                    style="width: 96px;"
                                    format="HH:mm"
                                    v-model="formData.rest_end_time"
                                    value-format='HH:mm'
                                    :picker-options="{format:'HH:mm'}">
                            </el-time-picker></div>
                            <!--<div class="set_row">合计工作时长：约<span class="highlight">0.00</span>个小时,记为<el-input type="number" size="small" v-model="formData.name"></el-input>天出勤</div>-->
                            <!--<div class="font12 color99">考勤统计工作时长及请假出差外出统计，会以此时间为准</div>-->
                            <div class="form_headline">人性化设置</div>
                            <div class="form_subhead">人性化考勤设置，豁免时间内，员工不计迟到和早退；弹性考勤时间内，员工不计迟到，下班时间按标准工作时间顺延</div>
                            <div class="set_row"><el-checkbox v-model="formData.unlate" :true-label='1' :false-label='0'></el-checkbox>晚到<el-input type="number" size="small"  v-model="formData.unlate_conut"></el-input>分钟不计迟到</div>
                            <div class="set_row"><el-checkbox v-model="formData.warninglate" :true-label='1' :false-label='0'></el-checkbox>晚到<el-input type="number" size="small" :min="0" v-model="formData.warninglate_count"></el-input>分钟记为严重迟到</div>
                            <div class="set_row"><el-checkbox v-model="formData.dangerlate" :true-label='1' :false-label='0'></el-checkbox>晚到<el-input type="number" size="small" :min="0" v-model="formData.dangerlate_count"></el-input>分钟记为旷工迟到</div>
                            <!--<div class="set_row"><el-checkbox v-model="formData.noinsign" :true-label='1' :false-label='0'></el-checkbox>下班不用打卡<span class="color99 font12 marginl5">（开启后，下班不打卡也不会记作异常）</span></div>
                            <div class="set_row"><el-checkbox v-model="formData.canlate" :true-label='1' :false-label='0'></el-checkbox>下班晚走，第二天可晚到<span class="color99 font12 marginl5">（第一天下班走太晚，第二天可以晚点到，仅支持固定班制内勤打卡）</span></div>-->
                        </template>

                        <div>
                            <el-button type="primary" size="small" @click="submitForm('form',0)">发布</el-button>
                            <el-button size="small" @click="submitForm('form',2)">保存</el-button>
                            <el-button size="small" @click.native="toRoute('-1')">取消</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </Header>


    </div>
</template>

<script lang="babel">
  export default {
    data(){
      return {
        formData: {
          name:'',
          type:'1',
          section:0,
          set:[{
            "start": "",
            "sign_startime": "",
            "sign_endtime": "",
            "end": "",
            "outsign_startime": "",
            "outsign_endtime": ""
          },],
          rest:'',    //	int	N		休息时间设置 0 关闭 1 开启
          rest_start_time:'',    //	string	N		休息开始时间
          rest_end_time:'',    //	string	N		休息结束时间
          unlate:0,    //	int	Y		是否启用不计迟到 0 不启用 1 启用
          unlate_conut:'',    //	int	N		N分钟不计迟到
          warninglate:0,    //	int	Y		是否启用严重迟到 0 不启用 1 启用
          warninglate_count:'',    //	int	N		N分钟计严重迟到
          dangerlate:0,    //	int	Y		是否启用旷工 0 不启用 1 启用
          dangerlate_count:'',    //	int	N		迟到N分钟计旷工
          noinsign:0,    //	int	Y		是否启用不打卡 0 否 1 是
          canlate:0,    //	int	Y		是否启动晚下班第二天可晚到 0 否 1 是
        },
        rules1: {
          type: [
            { required: true,  message: '请选择新增类型', trigger: 'change'},
          ],
          name: [
            { required: true,  message: '请填写类型名称', trigger: 'blur'},
          ],

        },
        set1:[
          {
            "start": "",
            "sign_startime": "",
            "sign_endtime": "",
            "end": "",
            "outsign_startime": "",
            "outsign_endtime": ""
          },
        ],
        set2:[
          {
            "start": "",
            "sign_startime": "",
            "sign_endtime": "",
            "end": "",
            "outsign_startime": "",
            "outsign_endtime": ""
          },
          {
            "start": "",
            "sign_startime": "",
            "sign_endtime": "",
            "end": "",
            "outsign_startime": "",
            "outsign_endtime": ""
          },
        ]
      }
    },
    components: {},
    methods: {
      //获取数据
      getDetail(){
        let _this=this;
        if(!_this.$route.query.id){return false}
        _this.axios.get('attend/classes/detail/'+_this.$route.query.id)//{params: this.comFormData} {params: {page:this.comFormData.page}}
          .then(function (res) {
            let info = res.data;
            console.log('详情：',info.data)
            if(info.status==1){
              if(info.data.type==1){
                _this.set1=info.data.set;
              }else{
                _this.set2=info.data.set;
              }
              _this.formData=info.data;
            }else{
              _this.$message.error(info.msg);
            }
          }).catch(function (res) {console.log(res)})
      },
      //提交
      submitForm(formName,display) {
        let _this=this;
        let url='';
        _this.formData.display=display;
        if(_this.$route.query.id){url='attend/classes/edit';_this.formData.id=_this.$route.query.id}else{url='attend/classes/add'}
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.axios.post(url,_this.formData)
              .then(function (res) {
                var info =res.data;
                if(info.status==1){
                  _this.$message.success(info.msg);
                  _this.$router.go(-1)
                }else{
                  _this.$message.error(info.msg);
                }
              }).catch(function (res) {console.log(res)})
          }else{
            setTimeout(()=>{
              var isError= document.getElementsByClassName("is-error");
              isError[0].querySelector('input').focus();
            },100);
            _this.$message.error('请填写必填项后提交');return false;
          }
        });
      },


      //删除班次
      onRemoveTime(index){
        this.formData.set.splice(index, 1)
      },
      //添加班次
      onAddTime(){
        this.formData.set.push({
          "start": "",
          "sign_startime": "",
          "sign_endtime": "",
          "end": "",
          "outsign_startime": "",
          "outsign_endtime": ""
        })
      },

    },
    mounted: function () {
      this.getDetail();
    },
    watch: {
      'formData.type':function (val){
        if(val==1){
          this.formData.set=this.set1;
        }else{
          this.formData.set=this.set2;
        }
      }
    }
  }
</script>

<style >
    .radioBox{
        cursor: pointer;
        float: left;
        box-sizing: border-box;
        padding: 16px;
        text-align: center;
        border-radius:4px;
        border:1px solid #E7E7E7;
        width:216px;
        height:120px;
    }
    .radio_headline{
        font-weight:500;
        font-size: 18px;
        color:#444;
        margin-bottom: 4px;
        line-height: 25px;
    }
    .radio_subhead{
        color: #666;
        font-size: 14px;
        line-height: 20px;
        font-weight:400;
    }
    .radioBox+.radioBox{
        margin-left: 24px;
    }
    .checked.radioBox{
        border-color:#44D0DB;

    }
    .form_headline{
        margin-top: 47px;
        font-size: 18px;
        color:#444;
        margin-bottom: 4px;
        font-weight: 600;
    }
    .form_subhead{
        font-size: 12px;
        color:#999;
        margin-bottom: 25px;
    }
    .form_notes{
        height:20px;
        font-size:14px;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:20px;
        margin-bottom: 16px;
    }
    .form_table{
        margin-bottom: 25px;
        text-align: center;
        font-size: 14px;
        color: #666666;
        border-collapse: collapse;
        border: 1px solid #e7e7e7;
        border-bottom: 0;

    }
    .form_table th {
        padding: 14px 0 ;
        background-color: #F7F7F7;
        font-size: 18px;
    }
    .form_table td{
        padding: 16px  0 16px 36px;
        text-align: left;
    }
    .form_table .tr_bottom td{
        padding-top: 0;
        border-bottom: 1px solid #e7e7e7;
    }
    .form_table .td_clear{
        border-bottom: 1px solid #e7e7e7;
        color: #D0021B;
        font-size: 24px;
        vertical-align: middle;
        padding: 16px 20px 16px 0;
    }

    .form_table .td_clear i{
        cursor: pointer;
    }
    .el-date-editor .el-range-separator{width: 10%;}
    .padding5{
        padding:0 8px ;
    }
    .el-input--small .el-input__inner{
        line-height: 33px;
    }
    .set_row{
        margin-bottom: 16px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color:#666;
    }

    .set_row .el-input{
        width: 70px;
        padding:0 8px;
    }
    .set_row .el-date-editor--time{
        padding: 0;
    }
    .set_row .el-input--small .el-input__inner{
        padding: 0 0 0 5px;
    }
    .set_row input{
        padding:0 0 0 10px;
    }
    .set_row .el-checkbox{
        margin-right: 8px;
    }



    .set_row22{
        margin-bottom: 4px;
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        color:#666;
    }

    .set_row22 .el-checkbox{
        margin-right: 8px;
    }
    .font12{font-size: 12px}
    .color99{color:#999}
    .highlight{color:#44D0DB}
    .marginl5{margin-left: 5px;}
    .mb32{ margin-bottom: 32px;}
    .mb13{ margin-bottom: 13px;}
    .mb16{ margin-bottom: 16px;}
    .mb25{ margin-bottom: 25px;}
    .mb29{ margin-bottom: 29px;}
    .form_table .el-tag--dark.el-tag--warning {
        background-color: #FFF4E2;
        border-color: #FFF4E2;
        color: #F5A623;
    }
    .form_table .el-tag {
        height: 21px;
        line-height: 19px;
        padding: 0 7px;
        margin-left: 8px;
    }

    /*选择人员input*/
    .input_box{
        line-height: 0;
        width: 100%;
        border-radius:4px;
        border:1px solid rgba(0,0,0,0.15);
        max-height: 122px;
        min-height: 40px;
        overflow: auto;
        vertical-align: top;
        padding: 5px 24px 3px 0;
    }

    .input_box .input_placeholder{
        color: #c0c4cc;
        position: absolute;
        top: 19px;
        left: 13px;
    }
    .is-error .input_box{
        border-color: #f56c6c;
    }

    .is-success .input_box{
        border-color: #44D0DB;
    }
    .input_box__suffix{
        color: #c0c4cc;
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -7px;
    }
    .newly_single_box{
        max-width: 645px;
        margin: 0 auto;
    }
    .set_row .el-input--small .el-input__inner{
        padding: 0 0 0 8px;
    }
</style>